<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Miscellanous:  Maze Builder</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Darren Latham">
<META NAME="section" CONTENT="Miscellanous">
<META NAME="description" CONTENT="Just enter the number of rows and columns you want and JavaScript will instantly build you a maze.  Each one it builds is different, too.  Simply print it out and have fun!  You just have to choose the starting point yourself, however.  Amazing!">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Darren Latham -->




<!-- Begin
function buildMaze(width, height) {
document.write("<html><style type=\"text/css\">.b { background:black;color:black} ");
document.write(".w { color:white;background:white }</style><body>");
var error = 0;
if ( (parseInt(width) < 5) || (parseInt(height) > 20) ) {
document.write("<p>The width entered ("+width+") must be between 5 and 20.  Hit back to try again.</p>");
error=1;
}
if ( (parseInt(height) < 5) || (parseInt(height) > 20) ) {
document.write("<p>The height entered ("+height+") must be between 5 and 20.  Hit back to try again.</p>");
error=1;
}
if (error == 0) {
var Maze = new Object();
Maze.height = height;
Maze.width = width;
createMaze(Maze);
displayMaze(Maze);
}
else document.write("<p>Use the browsers back button to try again.</p>");
document.write("</body></html>");
}
function createMaze(Maze) {
Maze.length = parseInt(Maze.height) * parseInt(Maze.width);
Maze.visited = Maze.length - 1;
Maze.currentX = 0;    // Current x position in maze
Maze.currentY = 0;    // Current y position in maze
Maze.choices = 2;     // Number of directions available to move
Maze.directions = 6   // Directions can move in 1 = North, 2 = East, 4 = South, 8 = West
Maze.direction = 0;   // Direction to move in (1 = north, 2 east, 3 south, 4 west)
Maze.data = new Array( Maze.length );  // Actual maze data
Maze.scanXstart = 0;
Maze.scanYstart = 0;
for (i = 0; i < Maze.length; i++)
Maze.data[i] = 0;
while (Maze.visited > 0) {
if (parseInt(Maze.choices) == 0) {
jumpToNewPos(Maze);
}
selectDirection(Maze);
moveInDirection(Maze);
investigateCurrentPosition(Maze);
Maze.visited--;
   }
}
function jumpToNewPos(Maze) {
for (y = Maze.scanYstart; y < Maze.height; y++) {
for(x = Maze.scanXstart; x < Maze.width; x++) {
Maze.currentX = x;
Maze.currentY = y;
investigateCurrentPosition(Maze);
if ( (locationVisited( Maze, 0, 0 ) != 0) && (Maze.choices > 0) ) {
Maze.scanXstart = x;
return;
   }
}
Maze.scanXstart = 0;
Maze.scanYstart = y+1;
}
document.write("<p>All locations visited and nowhere to go</p>");
Maze.visited = 0;
}
function moveInDirection(Maze) {
var offset = getOffset(Maze, Maze.currentX, Maze.currentY);
if (Maze.direction == 1) {
Maze.data[offset] |= 1;
Maze.currentY--;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 4;
}
else if (Maze.direction == 2) {
Maze.data[offset] |= 2;
Maze.currentX++;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 8;
}
else if (Maze.direction == 3) {
Maze.data[offset] |= 4;
Maze.currentY++;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 1;
}
else if (Maze.direction == 4) {
Maze.data[offset] |= 8;
Maze.currentX--;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 2;
}
else
document.write("no direction selected : Maze.direction = "+Maze.direction+"<br>");
}
function investigateCurrentPosition(Maze) {
// Determine the number of directions we can move in and what they are
Maze.directions = 0;
Maze.choices = 0;
Maze.direction = 0;
// Check north direction
if ( (Maze.currentY > 0) && (!locationVisited(Maze, 0, -1)) ) {
Maze.choices++;
Maze.directions |= 1;
}
// Check east direction
if ( (Maze.currentX < (Maze.width-1)) && (!locationVisited(Maze, 1, 0)) ) {
Maze.choices++;
Maze.directions |= 2;
}
// Check south direction
if ( (Maze.currentY < (Maze.height-1)) && (!locationVisited(Maze, 0, 1)) ) {
Maze.choices++;
Maze.directions |= 4;
}
// Check west direction
if ( (Maze.currentX > 0) && (!locationVisited(Maze, -1, 0)) ) {
Maze.choices++;
Maze.directions |= 8;
}
//  document.write("("+Maze.currentX+","+Maze.currentY+") - choices = "+Maze.choices+" - directions = "+Maze.directions+"<br>");
}
function locationVisited(Maze, xdiff, ydiff) {
if (Maze.data[ getOffset(Maze, Maze.currentX+xdiff, Maze.currentY + ydiff) ] != 0)
return true;
else
return false;
}
function getOffset(Maze, x, y) {
return ((Maze.width*y) + x);
}
function selectDirection(Maze) {
// Generate a number between 0 and Maze.choices - 1
// e.g. parseInt( Math.random() * 5 ) gives numbers between 0 and 4
var dirList = new Array( Maze.choices );
var pos = 0;
if ((Maze.directions&1) != 0) {
dirList[pos] = 1;
pos++;
}
if ((Maze.directions&2) != 0) {
dirList[pos] = 2;
pos++;
}
if ((Maze.directions&4) != 0) {
dirList[pos] = 3;
pos++;
}
if ((Maze.directions&8) != 0) {
dirList[pos] = 4;
pos++;
}
if (pos != Maze.choices)
document.write("Exits counted ("+pos+") is != exit choices ("+Maze.choices+"<br>");
var pos = parseInt( Math.random() * Maze.choices );
Maze.direction = dirList[pos];
}
function displayMaze(Maze) {
document.write("<code><p>");
var line = "";
for (y = 0; y < Maze.height; y++) {
line = "";
for(x = 0; x < Maze.width; x++) {
var offset = getOffset(Maze, x, y);
if ( Maze.data[offset]&1 != 0 )
line += "<span CLASS=\"b\">&nbsp</span><span CLASS=\"w\">#</span>";
else
line += "<span CLASS=\"b\">&nbsp&nbsp</span>";
}
line += "<span CLASS=\"b\">&nbsp</span>";
document.write( line + "<br>");
line = "";
for(x = 0; x < Maze.width; x++) {
var offset = getOffset(Maze, x, y);
if ((Maze.data[offset]&8) != 0)
line += "<span class=\"w\">##</span>";
else
line += "<span CLASS=\"b\">#</span><span CLASS=\"w\">#</span>";
}
line += "<span CLASS=\"b\">#</span>";
document.write( line + "<br>");
}
for (x = 0; x < Maze.width; x++)
document.write("<span CLASS=\"b\">##</span>");
document.write("<span CLASS=\"b\">#</span><br></code></p>");
}
//  End -->
</script>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /miscellaneous/"><font color="#FF0000"><b>Miscellanous</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Maze Builder</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Just enter the number of rows and columns you want and JavaScript will instantly build you a maze.  Each one it builds is different, too.  Simply print it out and have fun!  You just have to choose the starting point yourself, however.  Amazing!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
<form name=setsize method=get action="javascript:buildMaze(document.setsize.width.value, document.setsize.height.value);">
<table>
<tr><td>Enter width of maze (5-20)</td>
<td><input type=text name=width size=4></td>
</tr>
<tr>
<td>Enter height of maze (5-20)</td>
<td><input type=text name=height size=4></td>
</tr>
</table>
<input type=submit value="Build Maze">
</form>
</center>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Miscellanous:  Maze Builder</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  6.44 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL MAZE BUILDER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Darren Latham --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
function buildMaze(width, height) {
document.write("&lt;html&gt;&lt;style type=\"text/css\"&gt;.b { background:black;color:black} ");
document.write(".w { color:white;background:white }&lt;/style&gt;&lt;body&gt;");
var error = 0;
if ( (parseInt(width) &lt; 5) || (parseInt(height) &gt; 20) ) {
document.write("&lt;p&gt;The width entered ("+width+") must be between 5 and 20.  Hit back to try again.&lt;/p&gt;");
error=1;
}
if ( (parseInt(height) &lt; 5) || (parseInt(height) &gt; 20) ) {
document.write("&lt;p&gt;The height entered ("+height+") must be between 5 and 20.  Hit back to try again.&lt;/p&gt;");
error=1;
}
if (error == 0) {
var Maze = new Object();
Maze.height = height;
Maze.width = width;
createMaze(Maze);
displayMaze(Maze);
}
else document.write("&lt;p&gt;Use the browsers back button to try again.&lt;/p&gt;");
document.write("&lt;/body&gt;&lt;/html&gt;");
}
function createMaze(Maze) {
Maze.length = parseInt(Maze.height) * parseInt(Maze.width);
Maze.visited = Maze.length - 1;
Maze.currentX = 0;    // Current x position in maze
Maze.currentY = 0;    // Current y position in maze
Maze.choices = 2;     // Number of directions available to move
Maze.directions = 6   // Directions can move in 1 = North, 2 = East, 4 = South, 8 = West
Maze.direction = 0;   // Direction to move in (1 = north, 2 east, 3 south, 4 west)
Maze.data = new Array( Maze.length );  // Actual maze data
Maze.scanXstart = 0;
Maze.scanYstart = 0;
for (i = 0; i &lt; Maze.length; i++)
Maze.data[i] = 0;
while (Maze.visited &gt; 0) {
if (parseInt(Maze.choices) == 0) {
jumpToNewPos(Maze);
}
selectDirection(Maze);
moveInDirection(Maze);
investigateCurrentPosition(Maze);
Maze.visited--;
   }
}
function jumpToNewPos(Maze) {
for (y = Maze.scanYstart; y &lt; Maze.height; y++) {
for(x = Maze.scanXstart; x &lt; Maze.width; x++) {
Maze.currentX = x;
Maze.currentY = y;
investigateCurrentPosition(Maze);
if ( (locationVisited( Maze, 0, 0 ) != 0) && (Maze.choices &gt; 0) ) {
Maze.scanXstart = x;
return;
   }
}
Maze.scanXstart = 0;
Maze.scanYstart = y+1;
}
document.write("&lt;p&gt;All locations visited and nowhere to go&lt;/p&gt;");
Maze.visited = 0;
}
function moveInDirection(Maze) {
var offset = getOffset(Maze, Maze.currentX, Maze.currentY);
if (Maze.direction == 1) {
Maze.data[offset] |= 1;
Maze.currentY--;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 4;
}
else if (Maze.direction == 2) {
Maze.data[offset] |= 2;
Maze.currentX++;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 8;
}
else if (Maze.direction == 3) {
Maze.data[offset] |= 4;
Maze.currentY++;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 1;
}
else if (Maze.direction == 4) {
Maze.data[offset] |= 8;
Maze.currentX--;
offset = getOffset(Maze, Maze.currentX, Maze.currentY);
Maze.data[offset] |= 2;
}
else
document.write("no direction selected : Maze.direction = "+Maze.direction+"&lt;br&gt;");
}
function investigateCurrentPosition(Maze) {
// Determine the number of directions we can move in and what they are
Maze.directions = 0;
Maze.choices = 0;
Maze.direction = 0;
// Check north direction
if ( (Maze.currentY &gt; 0) && (!locationVisited(Maze, 0, -1)) ) {
Maze.choices++;
Maze.directions |= 1;
}
// Check east direction
if ( (Maze.currentX &lt; (Maze.width-1)) && (!locationVisited(Maze, 1, 0)) ) {
Maze.choices++;
Maze.directions |= 2;
}
// Check south direction
if ( (Maze.currentY &lt; (Maze.height-1)) && (!locationVisited(Maze, 0, 1)) ) {
Maze.choices++;
Maze.directions |= 4;
}
// Check west direction
if ( (Maze.currentX &gt; 0) && (!locationVisited(Maze, -1, 0)) ) {
Maze.choices++;
Maze.directions |= 8;
}
//  document.write("("+Maze.currentX+","+Maze.currentY+") - choices = "+Maze.choices+" - directions = "+Maze.directions+"&lt;br&gt;");
}
function locationVisited(Maze, xdiff, ydiff) {
if (Maze.data[ getOffset(Maze, Maze.currentX+xdiff, Maze.currentY + ydiff) ] != 0)
return true;
else
return false;
}
function getOffset(Maze, x, y) {
return ((Maze.width*y) + x);
}
function selectDirection(Maze) {
// Generate a number between 0 and Maze.choices - 1
// e.g. parseInt( Math.random() * 5 ) gives numbers between 0 and 4
var dirList = new Array( Maze.choices );
var pos = 0;
if ((Maze.directions&1) != 0) {
dirList[pos] = 1;
pos++;
}
if ((Maze.directions&2) != 0) {
dirList[pos] = 2;
pos++;
}
if ((Maze.directions&4) != 0) {
dirList[pos] = 3;
pos++;
}
if ((Maze.directions&8) != 0) {
dirList[pos] = 4;
pos++;
}
if (pos != Maze.choices)
document.write("Exits counted ("+pos+") is != exit choices ("+Maze.choices+"&lt;br&gt;");
var pos = parseInt( Math.random() * Maze.choices );
Maze.direction = dirList[pos];
}
function displayMaze(Maze) {
document.write("&lt;code&gt;&lt;p&gt;");
var line = "";
for (y = 0; y &lt; Maze.height; y++) {
line = "";
for(x = 0; x &lt; Maze.width; x++) {
var offset = getOffset(Maze, x, y);
if ( Maze.data[offset]&1 != 0 )
line += "&lt;span CLASS=\"b\"&gt;&nbsp&lt;/span&gt;&lt;span CLASS=\"w\"&gt;#&lt;/span&gt;";
else
line += "&lt;span CLASS=\"b\"&gt;&nbsp&nbsp&lt;/span&gt;";
}
line += "&lt;span CLASS=\"b\"&gt;&nbsp&lt;/span&gt;";
document.write( line + "&lt;br&gt;");
line = "";
for(x = 0; x &lt; Maze.width; x++) {
var offset = getOffset(Maze, x, y);
if ((Maze.data[offset]&8) != 0)
line += "&lt;span class=\"w\"&gt;##&lt;/span&gt;";
else
line += "&lt;span CLASS=\"b\"&gt;#&lt;/span&gt;&lt;span CLASS=\"w\"&gt;#&lt;/span&gt;";
}
line += "&lt;span CLASS=\"b\"&gt;#&lt;/span&gt;";
document.write( line + "&lt;br&gt;");
}
for (x = 0; x &lt; Maze.width; x++)
document.write("&lt;span CLASS=\"b\"&gt;##&lt;/span&gt;");
document.write("&lt;span CLASS=\"b\"&gt;#&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/p&gt;");
}
//  End --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;

&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;BODY&gt;

&lt;center&gt;
&lt;form name=setsize method=get action="javascript:buildMaze(document.setsize.width.value, document.setsize.height.value);"&gt;
&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Enter width of maze (5-20)&lt;/td&gt;
&lt;td&gt;&lt;input type=text name=width size=4&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Enter height of maze (5-20)&lt;/td&gt;
&lt;td&gt;&lt;input type=text name=height size=4&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;input type=submit value="Build Maze"&gt;
&lt;/form&gt;
&lt;/center&gt;

 

&lt;!-- Script Size:  6.44 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>


